<template>
  <div>
    <div class="applyHeader">
      <h2><span>退换货申请</span></h2>
      <el-button @click="reloadPage()">刷新</el-button>
    </div>
    <div class="main-bg">
      <div class="main">
        <!-- <el-tag effect="plain">全部申请&nbsp;[{{ total }}]</el-tag>
        <el-tag effect="plain">待审核&nbsp;[{{ refundSts1.length }}]</el-tag>
        <el-tag effect="plain">已处理&nbsp;[{{ refundSts2.length }}]</el-tag>
        <el-tag effect="plain">已拒绝&nbsp;[{{ refundSts3.length }}]</el-tag> -->
        <el-button type="primary" plain>全部申请&nbsp;[{{ count }}]</el-button>
        <el-button type="primary" plain @click="clickRefundSts1">待审核&nbsp;[{{ RefundSts1 }}]</el-button>
        <el-button type="primary" plain @click="clickRefundSts2">已处理&nbsp;[{{ RefundSts2 }}]</el-button>
        <el-button type="primary" plain @click="clickRefundSts3">已拒绝&nbsp;[{{ RefundSts3 }}]</el-button>
      </div>
      <el-collapse v-model="activeNames" style="border: 1px solid #e4e4e4;" class="chaxun">
        <el-collapse-item title="筛选查询" name="1">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="关键词">
              <el-input v-model="formInline.orderId" placeholder="订单号"></el-input>
            </el-form-item>
            <el-form-item label="收货人">
              <el-input v-model="formInline.userName" placeholder="用户账号"></el-input>
            </el-form-item>
            <!-- <el-form-item label="申请时间">
              <el-date-picker v-model="formInline.handelTime" type="datetime" placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" @click="searchStore">筛选</el-button>
              <el-button @click="ruleForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
      <div class="table">
        <div class="table_header">
          <span>数据列表</span>
          <div class="table_input">
            <!-- <span>排序方式</span>
            <el-select v-model="sort" placeholder="排序方式">
              <el-option-group v-for="group in options" :key="group.label" :label="group.label">
                <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-option-group>
            </el-select> -->
            <el-button @click="delClick" type="danger" style="margin-right: 18px;">批量删除</el-button>
          </div>
        </div>
        <!-- 表单 -->
        <el-table :data="OrderApplyList" border style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column fixed type="index" prop="refundId" label="序号" width="50">
            <template slot-scope="scope">
              {{ (scope.$index + 1) + (currentPage - 1) * pageSize }}
            </template>
          </el-table-column>
          <el-table-column prop="orderId" label="订单编号" width="180">
          </el-table-column>
          <el-table-column prop="applyTime" label="申请时间" sortable width="200">
          </el-table-column>
          <el-table-column prop="userName" label="用户账号" width="130">
          </el-table-column>
          <el-table-column prop="orderAmount" label="金额" width="120">
          </el-table-column>
          <el-table-column prop="applyType" label="类型" width="100">
            <template slot-scope="scope">
              <span effect="dark" v-if="scope.row.applyType == 2">退货</span>
              <span effect="dark" v-if="scope.row.applyType == 3">换货</span>
            </template>
          </el-table-column>
          <el-table-column prop="refundSts" label="申请状态" width="100">
            <template slot-scope="scope">
              <span effect="dark" v-if="scope.row.refundSts == 1" style="color: #66B1FF;">待审核</span>
              <span effect="dark" v-if="scope.row.refundSts == 2" style="color: #1CB09A;">已处理</span>
              <span effect="dark" v-if="scope.row.refundSts == 3" style="color: red;">已拒绝</span>
            </template>
          </el-table-column>
          <el-table-column prop="handelTime" label="处理时间" sortable width="200">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button type="text" size="small">
                <router-link
                  :to="{ path: '/home/Order/ReturnPending', query: { refundId: scope.row.refundId } }">查看详情</router-link>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pag">
          <el-pagination background layout="prev, pager, next" :total="count" :page-size="pageSize"
            :current-page="currentPage" @current-change="handleCurrentChange">
          </el-pagination>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
// import orderService from "./../../serivce/orderService";
export default {
  name: 'OrderApply',
  data() {
    return {
      //分页数据
      currentPage: 1,
      pageSize: 10,
      count: 0,
      RefundSts1: 0,
      RefundSts2: 0,
      RefundSts3: 0,
      OrderApplyList: [],
      RefundSts: [],


      //获取折叠面板 值`
      activeNames: ['1'],
      //获取筛选框的键值
      formInline: {
        orderId: '',
        userName: '',
        // applyTime: ''
      },
      // //排序下拉框赋值
      // options: [{
      //   label: '按顺序排序',
      //   options: [{
      //     value: '2',
      //     label: '按申请时间顺序排列'
      //   }, {
      //     value: '4',
      //     label: '按处理时间顺序排列'
      //   }]
      // }, {
      //   label: '按倒序排序',
      //   options: [{
      //     value: '1',
      //     label: '按申请时间倒序排列'
      //   }, {
      //     value: '3',
      //     label: '按处理时间倒序排列'
      //   }]
      // }],
      // sort: '1',
      //批量删除操作

    }
  },
  mounted() {
    //挂载页码
    let currentPage = this.currentPage;
    let pageSize = this.pageSize;
    this.GetOrderApplyList({ currentPage, pageSize }).then((res) => {
      this.OrderApplyList = res.data;
      this.count = res.count;
    })


  },
  methods: {
    ...mapActions('order', ['GetOrderApplyList', 'searchStoreInfo', 'delbatchRemoveById', 'Requirements', 'StateClassification', 'getExchangeCount']),
    //刷新
    reloadPage() {
      location.reload();
      this.$router.go(0);
    },
    //分页函数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.GetOrderApplyList({
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        // console.log(res.data);
        this.OrderApplyList = res.data;
      });
    },

    zhuangtai() {
      this.getExchangeCount().then((res) => {
        this.RefundSts1 = res.data.status1;
        this.RefundSts2 = res.data.status2;
        this.RefundSts3 = res.data.status3;
      })
    },

    //状态分类
    //点击页头分类按钮进行按类渲染
    clickRefundSts1() {
      this.StateClassification({ refundSts: 1 }).then((res) => {
        this.OrderApplyList = res.data;
        this.count = res.count;
      })
    },
    clickRefundSts2() {
      this.StateClassification({ refundSts: 2 }).then((res) => {
        this.OrderApplyList = res.data;
        this.count = res.count;
      })
    },
    clickRefundSts3() {
      this.StateClassification({ refundSts: 3 }).then((res) => {
        this.OrderApplyList = res.data;
        this.count = res.count;
      })
    },


    //选择框选中的值放到数组中
    handleSelectionChange(val) {
      // console.log(val)
      this.multipleSelection = val;
    },
    //删除
    delClick() {
      //2. 提示用户是否批量删除
      this.$confirm('此操作将永久删除所选数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //3. 判断数组长度
        if (this.multipleSelection.length == 0) {
          return;
        }
        // 1. 判断是否有不是已拒绝的数据
        let arr = this.multipleSelection.filter(item => {
          return item.refundSts != 3;
        })
        if (arr.length != 0) {
          //提示必须都是已拒绝
          this.$message({
            showClose: true,
            message: "删除内容只能为已拒绝的申请"
          });
          return;
        }
        // 4. 处理数据，将选中的数据，自取id放到一个数组中
        let ids = this.multipleSelection.map(item => {
          return item.refundId;
        })
        // console.log(ids);
        // 5. 调用发送到后台的接口
        this.delbatchRemoveById({ ids }).then(res => {
          //重新调取渲染页面
          this.GetOrderApplyList({ currentPage: this.currentPage, pageSize: this.pageSize }).then(res => {
            console.log(res);
            this.OrderApplyList = res.data;
          });
        });
        //提示
        this.$message({
          type: 'success', message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //筛查回调显示
    callback(res) {
      console.log(res);
      this.OrderApplyList = res;
    },
    //筛查功能 传参
    searchStore() {
      let obj = {
        orderId: this.formInline.orderId,
        userName: this.formInline.userName,
      }
      this.searchStoreInfo([obj, this.callback])
    },
    //重置按钮清空输入框
    ruleForm() {
      this.formInline.orderId = '',
        this.formInline.userName = '',
        this.formInline.applyTime = '',
        //回到初始渲染
        this.GetOrderApplyList({ currentPage: this.currentPage, pageSize: this.pageSize }).then(res => {
          this.OrderApplyList = res.data;
        });
    },
  },
  created() {
    this.zhuangtai()

  },

}
</script>

<style scoped>
.chaxun {
  /* width: 95%; */
  margin: 30px auto;
}

.applyHeader {
  height: 50px;
  line-height: 50px;
  box-sizing: border-box;
  background-color: #f0f0f0;
  overflow: hidden;
}

.applyHeader h2 {
  float: left;
}



.applyHeader span {
  font-size: 18px;
  font-weight: 400;
  border-left: 6px solid #1CB09A;
  padding-left: 16px;
  margin-left: 20px;

  height: 25px;
  line-height: 25px;
}

.applyHeader button {
  float: right;
  color: #fff;
  background-color: #1cb09a;
  margin-right: 20px;
  border-style: none;
  border-radius: 4px;
  padding: 8px 12px;
  margin-top: 10px;
}

.main-bg {
  padding: 30px 20px 0px 20px;
}

.main-bg span {
  margin-right: 20px;
}

.main {
  margin-bottom: 30px;
}

.main button {
  height: 30px;
  padding: 6px 10px;
  margin-right: 20px;
}

::v-deep .el-collapse-item__header {
  background-color: #f0f0f0;
  font-size: 16px;
  padding-left: 18px;
  padding-right: 24px;
}

.el-form {
  padding-top: 30px;
  padding-left: 30px;
}

.el-form-item {
  margin-right: 50px;
}


.el-form-item .el-button {
  margin-left: 30px;
}

.table {
  margin-top: 30px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
  padding-top: 10px;
  padding-bottom: 10px;
}

.table_header {
  height: 45px;
  overflow: hidden;
  margin-bottom: 10px;
  line-height: 40px;
  padding-left: 18px;
  padding-right: 18px;
}

/* .table_header span {
  font-size: 18px;

} */

.table_input {
  float: right;

}

.table_input span {
  margin-left: 20px;
}

::v-deep .table thead tr th {
  text-align: center;
}

::v-deep .table tbody tr td {
  text-align: center;
}

::v-deep .table tbody tr td span {
  margin: 0px !important;
}

.pag {
  text-align: center;
  padding-top: 8px;
}

::v-deep .table tbody tr td button a {
  text-decoration: none;
  color: #409EFF;
}
</style>
  